<template>
	<view class="page">
		<free-nav-bar showBack :showRight="false" :backEvent="false" @back="back">
			<input type="text" :placeholder="placeholder" style="width: 650rpx;" class="font-md" 
			v-model="keyword" @confirm="confirm" />
		</free-nav-bar>
		
		<view v-if="searchType == '' && list.length == 0">
			<view class="py-5 flex align-center justify-center">
				<text class="font text-light-muted">搜索指定内容</text>
			</view>
			<view class="px-4 flex flex-wrap">
				<view class=" flex align-center justify-center mb-3 border-left border-right" 
				style="width: 223rpx;" @click="changeSearchType(item)"
				v-for="(item,index) in typeList" :key="index">
					<text class="font text-hover-primary">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<free-list-item v-for="(item, index) in list" :key="index" 
		:title="item.nickname ? item.nickname : item.username" 
		:cover="item.avatar ? item.avatar : '/static/images/userpic.png'"
		@click="openUserBase(item.id)"></free-list-item>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	export default {
		data() {
			return {
				typeList:[
					{
						name:'聊天记录',
						key:'history'
					},
					{
						name:'用户',
						key:'user'
					},
					{
						name:'群聊',
						key:'group'
					}
				],
				searchType:"",
				keyword:"",
				list:[]
			}
		},
		methods: {
			back(){
				if(this.searchType == ''){
					return uni.navigateBack({
						delta: 1
					});
				}
				this.searchType = ''
			},
			// 搜索
			confirm(){
				$H.post('/search/user',{
					keyword: this.keyword
				}).then((res)=>{
					this.list = []
					if(res){
						this.list.push(res)
					}
				})
			},
			// 打开用户资料
			openUserBase(user_id){
				uni.navigateTo({
					url: '/pages/mail/user-base/user-base?user_id='+user_id
				});
			},
			changeSearchType(item){
				this.searchType = item.key
			}
		},
		computed:{
			placeholder(){
				let obj = this.typeList.find((item)=>{
					return item.key === this.searchType
				})
				if(obj){
					return '搜索' + obj.name
				}
				return '请输入关键字'
			}
		},
		components:{
			freeNavBar,
			freeListItem
		}
	}
</script>

<style>

</style>
